<template>
  <div>
    <page-banner></page-banner>
    <page-breadcrumbs :crumbData="crumbData"></page-breadcrumbs>
    <div class="page-item">
      <div class="title-box">
        <div class="font-24">线上合作品牌</div>
        <span class="border-bottom"></span>
      </div>
      <div class="logo-img-box">
        <div class="router-link" v-for="(item, index) in brandList" :key="index" @click="handleLogoClick(item)">
          <img :src="item.white_logo" alt="" class="logo">
        </div>
      </div>
    </div>
    <page-footer></page-footer>
  </div>
</template>

<script>
import PageBanner from 'components/Banner'
import PageBreadcrumbs from 'components/Breadcrumbs'
import PageFooter from 'components/Footer'
import Brand from '@/model/brand'
export default {
  name: 'Brand',
  components: {
    PageBanner,
    PageBreadcrumbs,
    PageFooter
  },
  data () {
    return {
      crumbData: [{
        title: '首页', jump: '/'
      }, {
        title: '合作品牌', jump: ''
      }, {
        title: '品牌列表', jump: '/brand'
      }],
      brandList: []
    }
  },
  async created () {
    await this.getBrands()
  },
  methods: {
    async getBrands () {
      try {
        const condition = { }
        this.brandList = await Brand.getBrandsByCondition(condition)
      } catch (error) {
        if (error.code === 10020) {
          this.brandList = []
        }
      }
    },
    handleLogoClick (item) {
      this.$router.push('/manual/' + item.id)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "~common/stylus/variable.styl"
  .title-box
    margin-top 1rem
    display flex
    flex-direction column
    align-items center
    .font-24
      color $color-orange
    .border-bottom
      padding-top .24rem
      width .32rem
      border-bottom 0.08rem solid $color-orange
  .img-box
    width 90%
    margin .5rem auto
    .map-img
      width 100%
  .logo-img-box
    width 90%
    margin .5rem auto
    display flex
    flex-direction row
    justify-content space-between
    flex-wrap wrap
    background-color #334048
    .router-link
      width 46%
      background-color #2d363f
      margin-top 6px
      padding 6px
      display flex
      align-items center
      justify-content center
      .logo
        width 80%
        margin-bottom .5rem
</style>
